<template>
  <div class="system">
    <b-row cols="2">
      <b-col class="pl-5">
        <h1>移植术后 <span>随访系统</span></h1>
        <p>
          通过日常记录、化验记录、健康记录、服药单、病友社区、在线诊疗等诸多方面，为医生全面的呈现当前患者的生命各项指标，为患者及医护之间搭建起全新沟通桥梁。
        </p>
        <p>
          以互联网的思维和手段解决现实当中空间制约、时间限制、信息不对等及沟通不充分等难题，有效的缓解门诊量的压力。
        </p>
      </b-col>
      <b-col>
        <b-img :src="require(`~/static/img/icon_sy_hxcpal_two.png`)"></b-img>
      </b-col>
    </b-row>

    <b-row cols="2" cols-sm="4" class="card-list">
      <b-col v-for="(item, index) in cards" :key="index">
        <div class="header">
          <b-img
            :src="require(`~/static/img/icon_sy_hxcpal_${item.icon}.png`)"
          ></b-img>
          <span>{{ item.title }}</span>
        </div>
        <p>{{ item.text }}</p>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        {
          title: "日常记录",
          icon: "rcjl",
          text:
            "录入体温、血压、血糖、心率、饮水量/尿量、身高、体重、睡眠时间、运动量、引流量等信息。"
        },
        {
          title: "化验记录",
          icon: "hyjl",
          text:
            "同步录入在医院的化验结果，有助于医生做出合理判断，告别手抄记录易丢失的痛点，永久保存化验单，让健康有章可循。"
        },
        {
          title: "健康记录",
          icon: "jkjl",
          text:
            "记录患者既往的手术史、诊断信息、特殊事件，为患者创建完整健康史，建立有效的医疗数据。"
        },
        {
          title: "服药单",
          icon: "fyd",
          text:
            "智能录入用药清单，医生可根据患者病情实时调整用药单，历史服药记录一键查询，一手掌握患者的服药情况，避免口误带来的恶性后果。"
        },
        {
          title: "病友社区",
          icon: "bysq",
          text:
            "为患者提供随访诊疗的社交平台，为术后的护理及保养维护提供有效帮助。"
        },
        {
          title: "在线诊疗",
          icon: "zxzl",
          text:
            "以平台为媒介支持与医生进行电话会诊、视频会诊、图文会诊，实时沟通避免病情恶化的后果。"
        },
        {
          title: "智能诊断",
          icon: "znzd",
          text:
            "通过日常数据、化验记录、服药情况、事件信息可智能为患者做出诊断结果供医生参考。"
        },
        {
          title: "数据分析",
          icon: "sjfx",
          text:
            "为医生智能分析当前患者性别占比、地域分布、并发症、原发病、药品和化验记录数据对比，为医生临床应用提供有力保证。"
        }
      ]
    };
  },
  components: {}
};
</script>

<style lang="less" scoped>
.system {
  margin-bottom: min(10vw, 144px);

  .pl-5 {
    padding-left: min(8.57vw, 123px) !important;

    h1 {
      .size(2.57vw, 36px);
      font-weight: bold;
      color: #030634;
      line-height: 50px;
      .size(3.5vw, 49px, margin-bottom);

      span {
        color: #3772c8;
      }
    }

    p {
      color: #474747;
      .size(1.38vw, 25px);
    }
  }
  img {
    width: min(44vw, 616px);
  }

  .card-list {
    .size(7.63vw, 110px, margin-top);

    .header {
      .size(18.19vw, 262px, height);
      .size(1.52vw, 22px);
      background: #3772c8;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      padding: 16px;
      transition: all 0.5s ease 0s;

      img {
        .size(2.291vw, 33px, width);
        .size(2.291vw, 33px, height);
        .size(1.38vw, 20px, margin-bottom);
      }
    }

    & > div {
      .size(2.27vw, 40px, margin-bottom);
      .size(18.19vw, 262px, max-height);
      overflow: hidden;

      &:nth-child(2n) {
        .header {
          background: #5964cf;
        }
      }

      &:hover {
        .header {
          .size(1.38vw, 20px);
          .size(4.14vw, 66px, height);
          flex-direction: row;
          justify-content: flex-start;

          img {
            margin-bottom: 0;
          }

          span {
            margin-left: 12px;
          }
        }

        p {
          display: block;
          .size(14.05vw, 196px, height);
        }
      }
    }

    p {
      display: none;
      .size(12.29vw, 196px, height);
      background: #f2f7ff;
      padding: 10px;
      .size(1.25vw, 18px);
      margin: 0;
    }
  }
}
</style>
